/*
 * @Description:step1-预约人数、车辆、地点
 * @Author: ziwei.ma
 * @Date: 2019-07-11 13:55:19
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-28 09:52:50
 */

<template>
  <div class="booking-detail-warpper flex-v fontsize32">
    <!-- 带加减号的两项 -->
    <!-- 乘车人数 -->
    <div class="number-of-passengers public-style flex-h flex-vc">
      <div class="cue-words2">乘车人数</div>
      <div class="btn-warpper flex-h flex-vc">
        <img
          src="../assets/jianhao.png"
          class="img-btn img-margin"
          @click="subtractNumber(1)"
        >
        <input
          class="select-number"
          type="number"
          v-model="numberOfPeople"
          oninput="value=value.replace(/[^\d]/g,'')"
        >
        <img
          src="../assets/jiahao.png"
          class="img-btn img-margin"
          @click="addNumber(1)"
        >
      </div>
    </div>
    <!-- 车辆数量 -->
    <div class="number-of-vehicles public-style flex-h flex-vc">
      <div class="cue-words2">预约车辆数</div>
      <div class="btn-warpper flex-h flex-vc">
        <img
          src="../assets/jianhao.png"
          class="img-btn img-margin"
          @click="subtractNumber(2)"
        >
        <input
          class="select-number"
          type="number"
          v-model="numberOfVehicles"
          oninput="value=value.replace(/[^\d]/g,'')"
        >
        <img
          src="../assets/jiahao.png"
          class="img-btn img-margin"
          @click="addNumber(2)"
        >
      </div>
    </div>
    <!-- 出发点和目的地 -->
    <div
      class="public-style public-color flex-h flex-vc"
      @click="goToSite('出发地')"
    >
      <div
        class="flex1 input-wrapper"
        :class="this.$store.getters.startPoint.ADDRESS?'':'default-font-color'"
      >{{startPoint}}</div>
      <img
        src="../assets/jiantou.png"
        class="img-btn"
      >
    </div>
    <div
      class="public-style public-color flex-h flex-vc"
      @click="goToSite('目的地')"
    >
      <div
        class="flex1 input-wrapper"
        :class="this.$store.getters.endPoint.ADDRESS?'':'default-font-color'"
      >{{endPoint}}</div>
      <img
        src="../assets/jiantou.png"
        class="img-btn"
      >
    </div>
    <!-- 停靠点-->
    <template v-for="(option,index) in stationList">
      <div
        class="public-style public-color flex-h flex-vc"
        :key="index"
        @click="goToSite('停靠点'+index)"
      >
        <div
          class="flex1 input-wrapper"
          :class="option.ADDRESS?'':'default-font-color'"
        >{{option.ADDRESS ? option.ADDRESS : option.DEFAULTVAL }}</div>
        <img
          src="../assets/jiantou.png"
          class="img-btn"
        >
      </div>
    </template>
    <!-- 添加/删除停靠点按钮 -->
    <div class="btn-wrapper public-style baseColorNoAcitve flex-h flex-vc">
      <div
        @click="addStation"
        v-show="isAdd"
      ><span class="icon iconfont icon-add-o fontsize32"></span>添加停靠点</div>
      <div
        @click="deleteStatin"
        v-show="isDelete"
        class="delete-btn"
      ><span class="icon iconfont icon-wrong fontsize32"></span>删除停靠点</div>
    </div>

    <!-- 底部两个圆点 -->
    <div class="dot-warpper flex-h flex-vc flex-hsb">
      <div class="dot baseBgColorNoActive"></div>
      <div class="dot baseBgColorNoActive"></div>
    </div>
    <!-- 底部两个竖条 -->
    <div class="line-warpper flex-h flex-hsb">
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>
</template>

<script>
import { verifyStartPoint, verifyEndPoint, verifyStationList } from '../utils/formVerify'

export default {
  data() {
    return {
      dataType: ''// 选择地址时的地点类型，带入跳转链接中使用
    }
  },
  computed: {
    // 乘车人数
    numberOfPeople: {
      get() {
        return this.$store.getters.numberOfPeople
      },
      set(val) {
        this.$store.dispatch('fetchNumberOfPeople', val)
      }
    },
    // 车辆数量
    numberOfVehicles: {
      get() {
        return this.$store.getters.numberOfVehicles
      },
      set(val) {
        this.$store.dispatch('fetchNumberOfVehicles', val)
      }
    },
    isAdd() {
      return !(this.stationList.length > 2)
    },
    isDelete() {
      return this.stationList.length !== 0
    },
    startPoint() {
      if (!this.$store.getters.startPoint.ADDRESS) {
        return '请选择出发地（必填）'
      } else {
        return this.$store.getters.startPoint.ADDRESS
      }
    },
    endPoint() {
      if (!this.$store.getters.endPoint.ADDRESS) {
        return '请选择目的地（必填）'
      } else {
        return this.$store.getters.endPoint.ADDRESS
      }
    },
    stationList() {
      return this.$store.getters.stationList
    }
  },
  methods: {
    // 添加停靠点
    addStation() {
      if (this.stationList.length < 3) {
        // 向停靠点列表提交对象，DEFAULTVAL为默认值，ADDRESS为获取到的停靠点名称
        this.$store.dispatch('AddStationList', { DEFAULTVAL: '请选择停靠点（必填）', ADDRESS: '' })
      }
    },
    // 删除停靠点
    deleteStatin() {
      if (this.stationList.length > 0) {
        this.stationList.pop()
      }
    },
    // 限制按钮添加数量
    addNumber(type) {
      if (type === 1) {
        this.numberOfPeople > 999 ? this.numberOfPeople = 999 : this.numberOfPeople++
      } else {
        this.numberOfVehicles > 999 ? this.numberOfVehicles = 999 : this.numberOfVehicles++
      }
    },
    // 限制按钮递减数量
    subtractNumber(type) {
      if (type === 1) {
        this.numberOfPeople < 1 ? this.numberOfPeople = 1 : this.numberOfPeople--
      } else {
        this.numberOfVehicles < 1 ? this.numberOfVehicles = 1 : this.numberOfVehicles--
      }
    },
    // 限制输入数字在1-999
    numberLimit(num) {
      switch (true) {
        case num < 1:
          this.showToast('不能再少啦')
          return 1
        case num > 999:
          this.showToast('不能再多啦')
          return 999
        default:
          return num
      }
    },
    // 跳转至地点选择
    goToSite(type) {
      this.dataType = type
      if (this.dataType === '出发地') {
        this.$AppRouterUtils.open('chooseSite.html?_tv=false&SELECT_TYPE=STARTPOINT&ROUTETYPE=reservationForm.html?_tv=false')
      } else if (this.dataType === '目的地') {
        this.$AppRouterUtils.open('chooseSite.html?_tv=false&SELECT_TYPE=ENDPOINT&ROUTETYPE=reservationForm.html?_tv=false')
      } else {
        this.$AppRouterUtils.open('chooseSite.html?_tv=false&SELECT_TYPE=STOPSTATION&ROUTETYPE=reservationForm.html?_tv=false')
      }
    },
    // 调用底层toast提示
    showToast(msg) {
      this.$Toast.then(Toast => {
        Toast.showShortBottom(
          msg,
          () => { }
        )
      })
    },
    // 获取地点的值
    _getAddress() {
      window.onBack = msg => {
        let data = {
          ADDRESS: JSON.parse(msg).NAME,
          ADDRESS_LNG: JSON.parse(msg).LONGITUDE,
          ADDRESS_LAT: JSON.parse(msg).LATITUDE
        }
        if (this.dataType === '出发地') {
          this.$store.dispatch('fetchStartPoint', data)
        } else if (this.dataType === '目的地') {
          this.$store.dispatch('fetchEndPoint', data)
        }
        this.stationList.forEach((item, index) => {
          let arr = this.stationList
          if (this.dataType === '停靠点' + index) {
            arr[index] = data
            this.$store.dispatch('StationAssignment', arr)
          }
        })
      }
    },

    // 校验选择的地点
    _verifyAddress() {
      return Promise.all([
        verifyStartPoint(this.$store.getters.startPoint.ADDRESS),
        verifyEndPoint(this.$store.getters.endPoint.ADDRESS),
        verifyStationList(this.$store.getters.stationList)
      ])
    }
  },

  watch: {
    numberOfPeople(val) {
      this.numberOfPeople = this.numberLimit(val)
    },
    numberOfVehicles(val) {
      this.numberOfVehicles = this.numberLimit(val)
    }
  },
  mounted() {
    this._getAddress()
  }
}
</script>

<style scoped>
.booking-detail-warpper {
  position: relative;
  width: 650px;
  min-height: 504px;
  border-radius: 8px;
  background-color: #fff;
  margin: 16px 0 32px;
  padding: 52px 18px 52px;
}
/* 单条item共用样式 */
.public-style {
  min-height: 84px;
  padding: 20px 32px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-sizing: border-box;
  word-break: break-all;
}
/* 地址选择公共样式*/
.public-color {
  background-color: #f9f9f9;
}
.img-btn {
  width: 48px;
  height: 48px;
}
.default-font-color {
  color: #999999;
}
.public-style > input::placeholder {
  color: #999999;
}
/* 数量选择/输入框 */
.cue-words2 {
  width: 200px;
  color: #999999;
}
.btn-warpper {
  margin-left: 22px;
}
.img-margin {
  margin: 0 16px;
}
.select-number {
  width: 84px;
  height: 38px;
  border-radius: 4px;
  line-height: 38px;
  text-align: center;
  border: 1px solid #cccccc; /*no*/
}
/* 两个按钮 添加/删除停靠点*/
.btn-wrapper > div > span {
  margin-right: 16px;
}
.delete-btn {
  position: absolute;
  right: 56px;
}
/* 两个圆点 */
.dot-warpper {
  width: 650px;
  position: absolute;
  bottom: 20px;
}
.dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0 30px;
}
/* 两个竖条 */
.line-warpper {
  position: absolute;
  width: 650px;
  bottom: -60px;
}
.line {
  width: 10px;
  height: 90px;
  background-color: #e7eff8;
  border-radius: 5px;
  margin: 0 34px;
}
</style>
